<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Real Time Syntax Highlighting Code Editor JavaScript</title>

	<style>
	body{font-family:Georgia,Serif;background-color:#faf9f9;margin-left:20px;}
	a,a:visited{color:#3366cc;}
	select{background:#ffffe1;}
	button{margin-top:5px;}
	h1{display:none;}
	.fixed {color:darkgreen;}
	</style>
	
	<script>
	function saveAsPlainText() {
		var IFrameObj = document.getElementById('rtshed').contentWindow;
		var textWithoutHighlighting = IFrameObj.RTSH.plainText()
		alert(textWithoutHighlighting);
	}
	
	last = null;
	function changeLang(lang,obj) {
		if(last == null) last = document.getElementById('phpbt');
		last.style.fontWeight = 'normal';
		last.style.color = 'black';
		obj.style.fontWeight = 'bold';
		obj.style.color = 'red';
		last = obj;
		rtshed.location.href=lang;
	}
	</script>
</head>

<body>

<h1>Real Time Syntax Highlighting Code Editor JavaScript</h1>
<h4>This is a code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.</h4>
<!--p>I looked all around and didn't find anything that suits my needs so I began to code this. I found some other implementations of real-time coloring systems like spell checkers and a lot of online text editors (not real time), but they are so much more complex than this. This one is simple and has few lines of JavaScript code.</p-->
<!--p>This is a part of a bigger project. I'm currently working on a online programming IDE (<a href="http://ecco.sourceforge.net/">ecco.sourceforge.net</a>) and this syntax highlighting engine will be its code editor.</p-->
<p>Example shows syntax highlighting for <strong>Java</strong>, <strong>PHP</strong>, <strong>JavaScript</strong> and <strong>HTML</strong>. Other languages can be easily implemented, its a matter of some regular expressions. Colors used for Java are based on colors used by <a href="http://www.eclipse.org/" target="_top">Eclipse IDE</a>.</p>

<strong>Demo:</strong> <em>choose language:</em> <button id="phpbt" onclick="changeLang('rtsh-php.htm',this)" style="font-weight:bold;color:red">PHP</button> <button onclick="changeLang('rtsh-java.htm',this)">Java</button> <button onclick="changeLang('rtsh-html.htm',this)">HTML</button> <button onclick="changeLang('rtsh-javascript.htm',this)">JavaScript</button> <button onclick="changeLang('rtsh-text.htm',this)">plain text</button><br />
<iframe width="90%" height="400" id="rtshed" name="rtshed" src="rtsh-php.htm?ts=76576573428"></iframe><br />
<button onclick="saveAsPlainText()"><strong>alert() code without highlighting</strong></button> :: Example of showing original code
<p>
<strong>Download RTSHJS v.0.84 (28 september 2006):</strong><br />
<ul>
	<li><a href="http://www.txt.org/rtshjs/rtsh.js" target="_top">rtsh.js</a> :: Take a look at the main code</li>
	<li><a href="http://www.txt.org/rtshjs/rtshjs-v.0.84.zip" target="_top">rtshjs-v.0.84.zip</a> :: Package with Java, PHP and HTML examples</li>
</ul>
</p>

<p>
Tested in <strong>Firefox 1.5</strong>, <strong>Internet Explorer 5.5, 6 and 7 RC1</strong>.<br />
All limitations and known bugs are listed here. If you find a new one, please <a href="https://beta.blogger.com/comment.g?blogID=4655848136530126957&postID=109359885527130993" target="_top">comment</a> or <a href="mailto:fermads@gmail.com">send me</a> an email.
<ul>
	<li><s>undo/redo do not work</s> <strong class="fixed">[probably FIXED]</strong></li>
	<li>page up/page down get lost (IE only)</li>
	<li>pasted (ctrl+v) text should be highlighted instantly</li>
	<li><s>line numbers bg seems to be reloading every parsing (IE only)</s> <strong class="fixed">[FIXED]</strong></li>
</ul>
</p>

<p>You can use and modify this code as you want. Just keep my credits somewhere around. Thanks.</p>

<a href="mailto:fermads@gmail.com">Fernando M.A.d.S.</a>

</body>
</html>
